import {
  Card,
  Breadcrumb,
  Form,
  Button,
  Radio,
  Input,
  Upload,
  Space,
  Select,
  message,
} from "antd";
import { BgColorsOutlined, PlusOutlined } from "@ant-design/icons";
import { Link } from "react-router-dom";
import { useSearchParams } from "react-router-dom";
import { useNavigate } from "react-router-dom";
import "./index.scss";
//   引入富文本编辑器相关的包
import ReactQuil from "react-quill";
import "react-quill/dist/quill.snow.css";
import {
  getChannelAPI,
  createArticleAPI,
  getArticleDetailAPI,
  updateArticleAPI,
} from "../../apis/arrticle";
import { useEffect, useState } from "react";
import { useChannel } from "../../hooks/useChannel";
import { color } from "echarts";
import FormItem from "antd/es/form/FormItem";
const { Option } = Select;
const Publish = () => {
  // 定义文章列表的数据状态和修的方法
  const { article } = useChannel();
  // 申请的id
  const [searchParams] = useSearchParams();
  const articleId = searchParams.get("id");
  const navigate = useNavigate();
  // 点击提交的事件
  const onFinish = async (formValue) => {
    const { title, content, channel_id } = formValue;
    // 1.按照文档格式处理表单数据
    const reqData = {
      title,
      content,
      cover: {
        type: imageType,
        // images:imageList.map(item=>{
        //   if (item.response) {
        //     return item.response.data.url
        //   } else {
        //     return item.url
        //   }
        // })
      },
      channel_id,
    };
    // 2.发送请求
    // const res= await createArticleAPI(reqData)
    // console.log(res);
    //  根据id判断是调用新增接口还是更新接口
    if (articleId) {
      // 更新接口
      updateArticleAPI({ ...reqData, id: articleId });
      message.success("更新成功");
    } else {
      createArticleAPI(reqData);
    }
  };

  const send = () => {
    message.success("发布成功");
  };
  const [info, setInfo] = useState({
    ID: "8888",
    Scode: "2021213725",
    Sname: "张三",
    Sxy: "信息学院",
    Ttype: "Pop",
    Ttime: "2019-03-11 09:00:00",
    Dname: "学工部",
    Stel: 19861001519,
    Desctipion: "wkwebview离线化加载h5资源解决方案",
  });
  // 获取实例
  const [form] = Form.useForm();
  // console.log(articleId,"id是aaaaaaaaaaaa");
  useEffect(() => {
    // async function getArticle() {
    //   const res = await getArticleDetailAPI(articleId);
    //   console.log(res, "aaaaaa");
    //   form.setFieldsValue({
    //     ...res.data,
    //     type: res.data.cover.type,
    //   });
    //   // 显示几张图片的模式
    //   setImageType(res.data.cover.type);
    //   // 显示图片
    //   // setImageList(res.data.cover.images.map(url=>{
    //   //   return {url}
    //   // }))
    // }
    //  getArticle()
    console.log(articleId, "id是aaaaaaaaaaaaaaaa");
    // if (articleId) {
    //   getArticle();
    // }
  }, [articleId, form]);
  return (
    <div className='publish'>
      <Card
        title={
          <Breadcrumb
            items={[
              { title: <Link to={"/"}>首页</Link> },
              { title: `${articleId ? "编辑文章" : "申请详情"}` },
            ]}
          />
        }
      >
        <Form>
          <Form.Item>
            <span style={{ fontSize: "18px", color: "#3888f7" }}>学号：</span>
            <span>{info.Scode}</span>
          </Form.Item>
          <Form.Item>
            <span style={{ fontSize: "18px", color: "#3888f7" }}>姓名：</span>
            <span>{info.Sname}</span>
          </Form.Item>
        </Form>
        <Form.Item>
          <span style={{ fontSize: "18px", color: "#3888f7" }}>所在学院：</span>
          <span>{info.Sxy}</span>
        </Form.Item>
        <Form.Item>
          <span style={{ fontSize: "18px", color: "#3888f7" }}>办事类型：</span>
          <span>{info.Ttype}</span>
        </Form.Item>
        <Form.Item>
          <span style={{ fontSize: "18px", color: "#3888f7" }}>预约时间：</span>
          <span>{info.Ttime}</span>
        </Form.Item>
        <Form.Item>
          <span style={{ fontSize: "18px", color: "#3888f7" }}>部门名称：</span>
          <span>{info.Dname}</span>
        </Form.Item>
        <Form.Item>
          <span style={{ fontSize: "18px", color: "#3888f7" }}> 手机号：</span>
          <span>{info.Stel}</span>
        </Form.Item>
        <Form.Item>
          <span style={{ fontSize: "18px", color: "#3888f7" }}>事宜描述：</span>
          <span>{info.Desctipion}</span>
        </Form.Item>
        <Form.Item>
          <Button
            type='primary'
            style={{ marginLeft: "15px", marginTop: "20px" }}
            onClick={() => {
              message.success("批准成功");
              navigate("/");
            }}
          >
            批准申请
          </Button>
          <Button
            type='primary'
            danger
            style={{ marginLeft: "15px", marginTop: "20px" }}
            onClick={() => {
              // message.success("已拒绝申请");
              message.error("已拒绝申请");
              navigate("/");
            }}
          >
            拒绝申请
          </Button>
        </Form.Item>
      </Card>
    </div>
  );
};

export default Publish;
